<template>
	<view>
		<uni-card :is-shadow="true">
			<view class="cardBody">
				<view style="color:#946142">温馨提示：如果测算项目未显示，请查看您付款时的商家订单号。</view>
				<uni-search-bar placeholder="输入订单号查询" @confirm="search"></uni-search-bar>
			</view>
		</uni-card>
		<uni-card title="宫晓辉" mode="title" :is-shadow="true" thumbnail="../static/order_01.png"
		 extra="2020-11-07 13:00" note="Tips">
			<view class="cardBody">
				<view>
					<text class="label">测算编号：</text>
					<text>b9weKix8VTytaZA6E9ZNVU</text>
				</view>
				<view>
					<text class="label">支付状态：</text>
					<text :style="{color:state?'green':'red'}" class="state">未支付</text>
				</view>
			</view>
			<template v-slot:footer>
				<view class="footer-box">
					<view style="color: #ff0000;padding: 0 20rpx 0 0;">删除</view>
					<view style="color: #ab7200;padding: 0 0 0 20rpx;">详情>></view>
				</view>
			</template>
		</uni-card>
	</view>
</template>

<script>
	import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'
	import uniCard from '@/components/uni-card/uni-card.vue'
	export default {
		data() {
			return {

			}
		},
		components: {
			uniSearchBar,
			uniCard
		},
		methods:{
			search(e){
				console.log(e)
			}
		},
		/* 监听下拉 */
		onPullDownRefresh(){
			console.log(1)
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		}
	}
</script>

<style scoped>
	.footer-box {
		display: flex;
		justify-content: space-between;
	}
	.cardBody>view{
		margin: 15rpx 0;
	}
	/* .label{
		font-weight: 700;
	} */
	.uni-searchbar{
		padding: 0;
		margin-bottom: 4px!important;
	}
</style>
